<template>
  <div class="category">
    <div class="text">分类：</div>
    <ul class="category-nav">
      <li>
        <el-tag :class="{active: activeIndex == 1}" @click="activeIndex = 1" size="large" class="ml-2" type="info">全部分类</el-tag>
      </li>
      <li v-for="item in list" :key="item.id" @click="change(item.id)" >
        <el-tag :class="{active: activeIndex == item.id}" size="large" class="ml-2" type="info">{{item.name}}</el-tag>
      </li>
    </ul>
  </div>
  <div class="goods-list">
    <!-- 列表 -->
    <ul>
      <li v-for="item in collectList" :key="item.id" >
        <GoodsItem :goods="item" />
      </li>
    </ul>
  </div>
  <!-- 推荐 -->
  <GoodsRelevant />
</template>
<script setup>
import { ref, computed } from 'vue'
import { findCollect } from '@/api/member'
import GoodsItem from '@/views/category/goods-item'
import GoodsRelevant from '@/views/goods/goods-relevant'
import { useStore } from 'vuex'
  // 获取数据函数
  const collectList = ref([])
  findCollect({page: 1, pageSize: 8}).then(data => {
    collectList.value = data.result.items
  })
  const store = useStore()
  const list = computed(()=>{
    return store.state.category.list
  })
  const activeIndex = ref(1)
  const change = (id) => {
    if (activeIndex.value == id) {
      activeIndex.value = 0
    }else {
      activeIndex.value = id
    }
  }
</script>
<style scoped lang="less">
.goods-list {
  background: #fff;
  padding-top: 25px;
  height: 100%;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
.category {
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    .text {
      margin: 20px;
    }
    .category-nav {
      display: flex;
      justify-content: center;
      li {
        display: block;
        margin: 0 10px;
        cursor: pointer;
      }
      .active {
        background-color: @mainColor;
        color: white;
      }
    }
  }
</style>